Trang web dự án năm cuối sử dụng CSS HTML5

1 <!DOCTYPE html>
2 <html lang=
"en">
3
4   <head>
5
6     <meta charset=
"utf-8">
7     <meta name=
"viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8     <meta name=
"description" content="FYP Webpage">
9     <meta name=
"author" content="James Qiu">
10
11     <title>FRing: A Geography-based P2P Overlay Network
for Fast and Robust Blockchain Systems</title>
12
13     <!-- Bootstrap core CSS -->
14     <link rel=
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
15
16     <!-- Custom fonts
for this template -->
17     <link rel=
"stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
18     <link href=
'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
19     <link href=
'https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
20     
21     <!-- Custom styles
for this template -->
22     <link href=
"vendor/startbootstrap/creative.css" rel="stylesheet" type='text/css'>
23
24     <link href=
"css/timeline.css" rel='stylesheet' type='text/css'>
25     <link href=
"css/style.css" rel='stylesheet' type='text/css'>
26     <link rel=
"stylesheet" href="css/animate.min.css">
27
28     <link rel=
"icon" type="image/x-icon" href="img/favicon.ico">
29   </head>
30
31   <body id=
"page-top">
32
33     <!-- Navigation -->
34     <nav
class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
35       <div
class="container">
36         <a
class="navbar-brand js-scroll-trigger" href="#page-top">Website Name Here</a>
37         <button
class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
38           <span
class="navbar-toggler-icon"></span>
39         </button>
40         <div
class="collapse navbar-collapse" id="navbarResponsive">
41           <ul
class="navbar-nav ml-auto">
42             <li
class="nav-item">
43               <a
class="nav-link js-scroll-trigger" href="#about">About</a>
44             </li>
45             <li
class="nav-item">
46               <a
class="nav-link js-scroll-trigger" href="#methodology">Methodology</a>
47             </li>
48             <li
class="nav-item">
49               <a
class="nav-link js-scroll-trigger" href="#progress">Timeline</a>
50             </li>
51             <li
class="nav-item">
52               <a
class="nav-link js-scroll-trigger" href="#results">Results</a>
53             </li>
54             <li
class="nav-item">
55               <a
class="nav-link js-scroll-trigger" href="#documentations">Documentations</a>
56             </li>
57             <li
class="nav-item">
58               <a
class="nav-link js-scroll-trigger" href="#contact">Contact</a>
59             </li>
60           </ul>
61         </div>
62       </div>
63     </nav>
64
65     <header
class="masthead">
66       <div
class="header-content">
67         <div
class="header-content-inner">
68           <h1 id=
"homeHeading">FRing: A Geography-based P2P Overlay Network for Fast and Robust Blockchain Systems</h1>
69           <hr>
70           <p>
71             Project FRing includes a noval peer-to-peer overlay network protocol that improves communication efficiency and security among peers, and an implementation of the protocol
in C++.
72           </p>
73           <a
class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
74         </div>
75       </div>
76     </header>
77
78     <section
class="bg-primary" id="about">
79       <div
class="container">
80         <div
class="row">
81           <div
class="col-lg-8 mx-auto text-center">
82             <h2
class="section-heading text-white">Introduction</h2>
83             <hr
class="light">
84             <p
class="text-faded">
85               Blockchain
is essentially a public decentralized ledger that securely records transactions between parties anonymously. The key component is to reach agreement among a group of nodes, i.e., consensus. However, based on current Peer-to-Peer network, the broadcast operation is inefficient. Increasing transaction rate leads to traffic congestion. <br><br>
86
87               Intel SGX
is a technology which protects code and execution integrity from hardware perspective. It provides chances to modify the network protocol and store some routing information, in order to reduce as many messages as possible and meanwhile retain the properties required by the blockchain application on top of the network. <br><br>
88
89               This project targets
this weakness of the P2P network under blockchain systems, designing and implementing a new protocol in the Peer-to-Peer network which achieves effciency and do not sacrifice any security or any other required properties.
90             </p>
91             <a
class="btn btn-default btn-xl js-scroll-trigger" href="https://github.com/James-QiuHaoran/hgfrr">Learn More about FRing</a>
92           </div>
93         </div>
94       </div>
95     </section>
96
97     <section id=
"methodology">
98       <div
class="container text-center">
99         <h2
class="section-heading">Methodology</h2>
100         <hr>
101       </div>
102       <div
class="container">
103         <div
class="wrapper">
104             <div
class="box">
105                 <div
class="text"><h5>Protocol Design</h5>
106                 <hr style=
"border-color: white">
107                 <p>
108                     We are going to find what researchers were doing
on improving the performance of peer-to-peer network and figure our what is preventing them from making it more efficient. After having done literature review about peer-to-peer network and Intel SGX, we can think about how to make use of Intel SGX to mitigate the problem unsolved.
109                 </p>
110             </div>
111             </div>
112             <div
class="middle"></div>
113             <div
class="box">
114                 <div
class="text"><h5>System Implementation</h5>
115                 <hr style=
"border-color: white">
116                 <p>
117                     We will first
do some research on existing blockchain systems such as GEEC and extract the peer-to-peer network layer from them. Modifying the network layer and then integrate it with the original system.
118                 </p>
119                 </div>
120             </div>
121             <div
class="middle"></div>
122             <div
class="box">
123                 <div
class="text"><h5>System Evaluation</h5>
124                 <hr style=
"border-color: white">
125                 <p>
126                     After having the system working, we are going to evaluate our system compared to other existing blockchain systems
on running the same applications like database, cryptocurrency, etc..
127                 </p>
128                 </div>
129             </div>
130         </div>
131       </div>
132     </section>
133
134     <section
class="timeline" id="progress">
135       <div
class="container">
136         <div
class="row">
137           <div
class="col-lg-12 text-center">
138               <h2
class="section-heading text-white">Timeline</h2>
139               <hr
class="primary">
140           </div>
141         </div>
142       </div>
143       <ul>
144         <li>
145           <div>
146             <time>Sept.</time>
147             <p>
148                 â— Detailed project plan submission<br>
149                 â— Project webpage goes live<br>
150                 â— Literature review<br>
151             </p>
152           </div>
153         </li>
154         <li>
155           <div>
156             <time>Oct.</time>
157             <p>
158                 â— Related word review<br>
159                 â— Scratch and discuss the first version of the system/protocol<br>
160             </p>
161           </div>
162         </li>
163         <li>
164           <div>
165             <time>Nov. - Dec.</time>
166             <p>
167                 â— Complete the network protocol design<br>
168                 â— Start to implement the system<br>
169                 â— Interim report submission<br>
170             </p>
171           </div>
172         </li>
173         <li>
174           <div>
175             <time>Jan. - Feb.</time>
176             <p>
177                 â— System implementation<br>
178                 â— Testing<br>
179             </p>
180           </div>
181         </li>
182         <li>
183           <div>
184             <time>Mar. - April.</time>
185             <p>
186                 â— System evaluation<br>
187                 â— Final report submission<br>
188                 â— Final project presentation<br>
189                 â— Final presentation poster design<br>
190             </p>
191           </div>
192         </li>
193         <li>
194           <div>
195             <time>May</time>
196             <p>
197                 â— Final project exhibition<br>
198             </p>
199           </div>
200         </li>
201       </ul>
202     </section>
203
204     <section id=
"results">
205       <div
class="container text-center">
206         <h2
class="section-heading">Results and Deliverables</h2>
207         <hr>
208         <p>
209           This project will deliver a
new protocol for Peer-to-Peer network which improves the performance of the communication among peers in the network such as the broadcast operation. The protocol should not sacrifice any property in the original protocol needed in the blockchain. Based on the protocol, this project will also deliver a whole blockchain system, implementing the protocol on some existing blockchain systems like GEEC and ByzCoin. The project will also give an evaluation on the performance of various blockchain systems in which it is expected to have higher efficiency.
210         </p>
211       </div>
212     </section>
213
214     <section
class="bg-primary" id="documentations">
215       <center>
216         <div
class="container">
217           <div
class="row">
218             <div
class="col-lg-12 text-center">
219               <h2
class="section-heading text-white">Documentations</h2>
220               <hr
class="light">
221               <br/>
222             </div>
223           </div>
224         </div>
225         <div
class="container">
226           <div
class="row">
227             <div
class="col-lg-2 col-sm-6">
228               <a
class="portfolio-box" href="documents/project-plan.pdf">
229                 <img
class="img-fluid" src="img/document/project_plan.jpg" alt="">
230                 <div
class="portfolio-box-caption">
231                   <div
class="portfolio-box-caption-content">
232                     <div
class="project-category text-faded">
233                       Available Now
234                     </div>
235                     <div
class="project-name">
236                       Project Plan
237                     </div>
238                   </div>
239                 </div>
240               </a>
241             </div>
242             
243             <div
class="col-lg-2 col-sm-6">
244               <a
class="portfolio-box" href="documents/interim-report.pdf">
245                 <img
class="img-fluid" src="img/document/mid_report.jpg" alt="">
246                 <div
class="portfolio-box-caption">
247                   <div
class="portfolio-box-caption-content">
248                     <div
class="project-category text-faded">
249                       Available Now
250                     </div>
251                     <div
class="project-name">
252                       Interim Report
253                     </div>
254                   </div>
255                 </div>
256               </a>
257             </div>
258
259             <div
class="col-lg-2 col-sm-6">
260               <a
class="portfolio-box" href="mailto:jamesqiu@hku.hk">
261                 <img
class="img-fluid" src="img/document/final_report.jpg" alt="">
262                 <div
class="portfolio-box-caption">
263                   <div
class="portfolio-box-caption-content">
264                     <div
class="project-category text-faded">
265                       Email For Copy
266                     </div>
267                     <div
class="project-name">
268                       Final Report
269                     </div>
270                   </div>
271                 </div>
272               </a>
273             </div>
274
275             <div
class="col-lg-3 col-sm-6">
276               <a
class="portfolio-box" href="documents/poster_high.jpg">
277                 <img
class="img-fluid" src="img/document/poster.jpg" alt="">
278                 <div
class="portfolio-box-caption">
279                   <div
class="portfolio-box-caption-content">
280                     <div
class="project-category text-faded">
281                       Available Now
282                     </div>
283                     <div
class="project-name">
284                       Poster
285                     </div>
286                   </div>
287                 </div>
288               </a>
289             </div>
290             
291             <div
class="col-lg-3 col-sm-6">
292               <a
class="portfolio-box" href="documents/slides.pdf">
293                 <img
class="img-fluid" src="img/document/slides.jpg" alt="">
294                 <div
class="portfolio-box-caption">
295                   <div
class="portfolio-box-caption-content">
296                     <div
class="project-category text-faded">
297                       Available Now
298                     </div>
299                     <div
class="project-name">
300                       Slides
301                     </div>
302                   </div>
303                 </div>
304               </a>
305             </div>
306           </div>
307         </div>
308       </center>
309     </section>
310
311     <section id=
"contact">
312       <div
class="container">
313         <div
class="row">
314           <div
class="col-lg-12 text-center">
315             <h2
class="section-heading">Our Team</h2>
316             <hr
class="primary">
317           </div>
318         </div>
319       </div>
320       <div
class="container">
321         <div
class="row">
322           <div
class="col-md-4 text-center team">
323               <img
class="team-photo" src="img/team/jamesqiu.jpg">
324               <h3>Haoran Qiu</h3>
325               <p>Team member</p>
326               <br/>
327               <div
class="team-contact-mid">
328                 <ul
class="list-inline text-center">
329                   <li
class="list-inline-item">
330                     <a href=
"https://james-qiuhaoran.github.io/index.html">
331                       <span
class="fa-stack fa-lg">
332                         <i
class="fa fa-circle fa-stack-2x"></i>
333                         <i
class="fa fa-user-circle fa-stack-1x fa-inverse"></i>
334                       </span>
335                     </a>
336                   </li>
337                   <li
class="list-inline-item">
338                     <a href=
"https://github.com/James-QiuHaoran">
339                       <span
class="fa-stack fa-lg">
340                           <i
class="fa fa-circle fa-stack-2x"></i>
341                           <i
class="fab fa-github fa-stack-1x fa-inverse"></i>
342                       </span>
343                     </a>
344                   </li>
345                   <li
class="list-inline-item">
346                     <a href=
"mailto:jamesqiu@hku.hk">
347                       <span
class="fa-stack fa-lg">
348                         <i
class="fa fa-circle fa-stack-2x"></i>
349                         <i
class="fa fa-envelope fa-stack-1x fa-inverse"></i>
350                       </span>
351                     </a>
352                   </li>
353                 </ul>
354               </div>
355           </div>
356           <div
class="col-md-4 text-center team">
357               <img
class="team-photo" src="img/team/tao.jpg">
358               <h3>Tao Ji</h3>
359               <p>Team member</p>
360               <br/>
361               <div
class="team-contact">
362                 <ul
class="list-inline text-center">
363                   <li
class="list-inline-item">
364                     <a href=
"">
365                       <span
class="fa-stack fa-lg">
366                           <i
class="fa fa-circle fa-stack-2x"></i>
367                           <i
class="fab fa-github fa-stack-1x fa-inverse"></i>
368                       </span>
369                     </a>
370                   </li>
371                   <li
class="list-inline-item">
372                     <a href=
"mailto:">
373                       <span
class="fa-stack fa-lg">
374                         <i
class="fa fa-circle fa-stack-2x"></i>
375                         <i
class="fa fa-envelope fa-stack-1x fa-inverse"></i>
376                       </span>
377                     </a>
378                   </li>
379                 </ul>
380               </div>
381             </div>
382             <div
class="col-md-4 text-center team">
383             <img
class="team-photo" src="img/team/heming.jpg">
384             <h3>Dr. Heming Cui</h3>
385             <p>Supervisor</p>
386             <br/>
387             <div
class="team-contact">
388               <ul
class="list-inline text-center">
389                 <li
class="list-inline-item">
390                   <a href=
"https://i.cs.hku.hk/~heming/">
391                     <span
class="fa-stack fa-lg">
392                         <i
class="fa fa-circle fa-stack-2x"></i>
393                         <i
class="fa fa-user-circle fa-stack-1x fa-inverse"></i>
394                     </span>
395                   </a>
396                 </li>
397                 <li
class="list-inline-item">
398                   <a href=
"mailto:heming@cs.hku.hk">
399                     <span
class="fa-stack fa-lg">
400                       <i
class="fa fa-circle fa-stack-2x"></i>
401                       <i
class="fa fa-envelope fa-stack-1x fa-inverse"></i>
402                     </span>
403                   </a>
404                 </li>
405               </ul>
406             </div>
407           </div>
408         </div>
409       </div>
410     </section>
411
412     <footer>
413       <div
class="container">
414         <div
class="row">
415           <div
class="col-lg-8 col-md-10 mx-auto">
416             <p
class="copyright text-muted text-center">Copyright&copy 2018 James Qiu.<br> All Rights Reserved.</p>
417           </div>
418         </div>
419       </div>
420     </footer>
421
422     <script src=
"vendor/jquery/jquery-3.2.1.slim.min.js"></script>
423     <script src=
"vendor/popper/popper.min.js"></script>
424     <script src=
"vendor/bootstrap/bootstrap.min.js"></script>
425     <script src=
"js/animate.js"></script>
426     <script src=
"js/timeline.js"></script>
427     
428 </body>
429 </html>


Gõ tìm kiếm nhanh...